<template>
	<u-navbar :leftIconSize="42" titleStyle="font-size:20px;font-weight:600" :autoBack="true" :placeholder='true'
		title="提现">
	</u-navbar>
  <scroll-view :scroll-top="0" scroll-y="true" class="scroll-Y" @scrolltolower="lower">
    <view style="position: relative">
      <view class="padding-30rpx scroll-item">
        <view style="position: relative">
          <image style="width: 100%; height: 203px;" src="@/static/image/mine/order-bg.png" mode=""></image>
          <view class="withdrawal-header-content">
            <view class="flex-jc-s-b" style="width: 100%;padding: 0 15px;">
              <view class="flex-column" style="align-items: flex-start">
                <view class="flex-jc-start">
                  <view style="margin-right: 10px;font-size: 12px;font-family: 'PingFang SC-Medium',sans-serif; ">余额(元)</view>
                  <u-icon v-if="data.moneyShow" @click="data.moneyShow=false" name="eye" color="#FFFFFF" size="32"></u-icon>
                  <u-icon v-else @click="data.moneyShow=true" name="eye-off" color="#FFFFFF" size="32"></u-icon>
                </view>

                <view class="" style="padding: 9px 0 9px 0;font-size: 35px; font-family: 'DIN Alternate',sans-serif;">
                  <text v-if="data.moneyShow === true">{{data.info.balancePrice || 0}}</text>
                  <text v-else style="transform:translateY(3px);display: block;">******</text>
                </view>
              </view>
              <view class="flex-column" style="align-items: flex-end">
                <view>
                  <u-button
                      :customStyle="{'background': 'linear-gradient(90deg, #9ADCFF 0%, #97CAFF 100%)','margin':'0','margin-top':'20px','width': '70px','height': '32px'}"
                      type="primary" shape="circle" text="提现" style="font-family: 'PingFang SC-Medium',sans-serif; width: 70px; height: 32px; font-size: 14px;align-items: center"
					  @click="goWithdrawalAdd">
                  </u-button>
                </view>
                <view>
                  <text style="white-space: nowrap;color: #FFFFFF;font-size: 10px;font-weight: 400;font-family: 'PingFang SC-Medium',sans-serif; ">
                    {{'今日可提现次数(' + (data.times.unusedTimes || 0) + '/' + (data.times.totalTimes || 0) + ')'}}
                  </text>
                </view>
              </view>
            </view>
			<view style="padding: 0 15px">
				<view style="width: 100%;margin: 18px 0 15px 0;border: 1px solid #FFFFFF;opacity: 0.2;"></view>
			</view>
            <view class="flex-jc-s-b" style="width: 100%;color: #FFFFFF;font-weight: 500;font-size: 11px;font-family: 'PingFang SC-Medium',sans-serif;padding: 0 15px">
              <view class="flex-column" style="align-items: flex-start;">
                <text>已提现金额(元)</text>
                <view style="margin-top: 3px;font-size: 22px;font-family: 'DIN Alternate',sans-serif;">
                  <text v-if="data.moneyShow === true">{{data.info.withdrawnPrice || 0}}</text>
                  <text v-else style="transform:translateY(3px);display: block;">******</text>
                </view>
              </view>
              <view class="flex-column" style="align-items: flex-start; padding-left: 15px">
                <text>提现中金额(元)</text>
                <view style="margin-top: 3px;font-size: 22px;font-family: 'DIN Alternate',sans-serif;">
                  <text v-if="data.moneyShow === true">{{data.info.withdrawingPrice || 0}}</text>
                  <text v-else style="transform:translateY(3px);display: block;">******</text>
                </view>
              </view>
              <view class="flex-column" style="align-items: flex-start; padding-left: 15px">
                <view class="flex-jc-start">
                  <text>待结算金额(元)</text>
                  <view style="margin: 3px 0 0 5px">
                    <u-icon @click="data.illustrationShow=true" name="question-circle" color="#FFFFFF" size="20"></u-icon>
                  </view>
                </view>
                <view style="margin-top: 3px;font-size: 22px;font-family: 'DIN Alternate',sans-serif;">
                  <text v-if="data.moneyShow === true">{{data.info.pendingPrice || 0}}</text>
                  <text v-else style="transform:translateY(3px);display: block;">******</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <view style="color: #333333;font-size: 14px;font-weight: 500;font-family: 'PingFang SC',sans-serif; margin-top: 20px">
          <text>提现记录</text>
        </view>
        <empty :config="{text: '您还没有提现记录'}" v-if="data.list.length === 0" />
        <view v-else class="flex-jc-s-b padding-30rpx white-bg" v-for="(item,index) in data.list"
              style="font-size: 12px;color: #999999;padding: 15px 0;margin-top: 15px;border-radius: 8px;position: relative;">
          <view v-if="item.statusCode === 'normal' && item.completeFlag === 0" class="right-icon" style="font-size: 12px;">提现中</view>
          <view v-if="item.statusCode === 'normal' && item.completeFlag === 1" class="right-icon" style="font-size: 12px;">提现成功</view>
          <view v-if="item.statusCode === 'exception'" class="right-icon" style="font-size: 12px;background: #F87168">提现失败</view>
          <view class="flex-jc-start" style="margin-left: 10px;align-items: center;">
            <view>
              <image style="width: 30px;height: 30px;" src="@/static/image/mine/withdrawal.png" mode=""></image>
            </view>
            <view class="flex-column" style="transform: translateX(10px);align-items: flex-start ">
              <text style="color: #666666;font-size: 14px;font-weight: 500;font-family: 'PingFang SC',serif">{{'单号：' + item.num}}</text>
              <text style="color: #333333;font-size: 20px;font-weight: 500;font-family: DIN,sans-serif; padding: 10px 0 5px 0">{{item.price||''}}</text>
              <text style="color: #999999;font-size: 12px;font-weight: 400;font-family: 'PingFang SC',serif">{{item.submitTime||''}}</text>
            </view>
          </view>
          <view class="flex-jc-start" style="margin-right: 15px" @click="goWithdrawalDetail(item.id)">
            <text style="color: #999999;font-size: 14px;font-weight: 400;font-family: 'PingFang SC',serif">{{'查看详情'}}</text>
            <u-icon name="arrow-right" color="#999999 " size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>
  </scroll-view>
  <u-popup @close="data.illustrationShow = false" :customStyle="{'border-radius': '8px'}" :safeAreaInsetBottom="false" :show="data.illustrationShow" mode='center'>
    <view class="common-popup text-center" style="border-radius: 8px; padding-bottom: 20px">
      <view class="popup-tip">待结算金额</view>
      <view class="popup-content">{{data.illustration}}</view>
      <u-button :customStyle="{'font-size':'6px','width': '130px','height': '40px'}"
                type="primary" shape="circle" text="确定" @click="data.illustrationShow = false"></u-button>
    </view>
  </u-popup>
</template>
<script setup>
	import { onMounted, reactive } from "vue";
  import {pagingApi, countApi, timesApi} from './const.js'
  import pageRoute from '../../utils/pageRoute'
  import empty from '@/pages/components/empty.vue'
  const data = reactive({
		dateShow: false,
    moneyShow: false,
		selectShow: false,
    illustrationShow: false,
    illustration: '每笔订单产生的佣金，在订单支付后的24小时内属于待结算金额，超过24小时后计入余额，用户可进行提现',
		list: [],
		info: {},
    times: {},
		request: {
			"pageDomain": {
				"pageNum": "1",
				"pageSize": "5",
				"orderByColumn": "",
				"isAsc": "",
				"reasonable": ""
			}
		},
    resultTotal: 0
	})
	onMounted(() => {
		paging()
		info()
	})
	const paging = () => {
		pagingApi(data.request).then((res) => {
      data.list.push(...res.rows)
      data.resultTotal = res.total || 0
    }).catch(() => {
      data.resultTotal = 0
    })
	}
	const info = () => {
		countApi().then((res) => {
			data.info = res.data
		})
    timesApi().then((res) => {
      data.times = res.data
    })
	}
  function goWithdrawalDetail(id) {
    pageRoute.route('pages/withdrawal/detail', {id: id})
  }
  function lower(e) {
    if ((data.resultTotal <= data.list.length) || data.resultTotal === 0) { return }
    data.request.pageDomain.pageNum++
    paging()
  }
  function goWithdrawalAdd(){
	  let useTime = data.times.usedTimes || 0
	  let totalTime = data.times.totalTimes || 0
	  if (useTime < totalTime) {
		  pageRoute.route('pages/withdrawal/add')
	  } else {
      uni.showToast({title: '今日提现次数已用完，请等待明日更新！', duration: 1200, icon: "none" });
    }
  }
</script>
<style lang="scss" scoped>
  .mine-cell {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  }
  .right-icon {
    width: 67px;
    background: #409EFF;
    border-radius: 0px 9px 0px 9px;
    color: #fff;
    text-align: center;
    padding: 2px;
    position: absolute;
    top: 0;
    right: 0;
  }
	.date-text {
		width: 160px;
		height: 36px;
		text-align: center;
		line-height: 36px;
		background: #FFFFFF;
		border-radius: 2px;
		border: 1px solid #E7E7E7;
	}

	.label-icon {
		width: 108px;
		height: 36px;
		background: #F6F6F6;
		border-radius: 2px;
		text-align: center;
		font-size: 15px;
		line-height: 36px;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #333333;
		position: relative;
	}

	.label-img {
		width: 28px;
		height: 17px;
		position: absolute;
		bottom: 0;
		right: 0;
	}

	.active-label {
		color: #409EFF !important;
		background: #EAF0FE !important;
	}

	.withdrawal-header-content {
		width: 345px;
    //height: 180px;
		position: absolute;
    // padding: 0 10px;
		font-weight: 500;
		color: #fff;
		font-size: 11px;
		top: 50%;
		left: 50%;
    transform: translate(-50%, -50%);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		// margin: 0 auto;
		z-index: 1;
	}
  .scroll-Y {
    height: calc(100vh - 74px);
  }
  .scroll-item {
    margin-top: 15px;
    display: flex;
    flex-direction: column;
  }
  .scroll-view-item {
    height: 300rpx;
    line-height: 300rpx;
    text-align: center;
    border: 1px solid red;
    font-size: 36rpx;
  }
</style>
